<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      text-align: center;
    }
    img {
      width: 250px;
      height: 200px;
    }
  </style>
  <body>
    <!-- <div>
      <img
        src="https://img-baofun.zhhainiao.com/market/133/a9da7216f95e9d8243449bd21f876ac2_preview_raw.jpg"
        alt=""
        ondblclick="fun(this)"
      />
      <img
        src="https://img-baofun.zhhainiao.com/market/133/f43477adecc82e51dd1f5bd901c854c5_preview_raw.jpg"
        alt=""
        ondblclick="fun(this)"
      />
      <img
        src="https://img-baofun.zhhainiao.com/market/133/508e9f36242b89776f9196a986af9bdb.mp4.jpg"
        alt=""
        ondblclick="fun(this)"
      />
      <img
        src="https://img-baofun.zhhainiao.com/market/133/2d64f9b1d09b9c519b301d4d721adc0c.jpg"
        alt=""
        ondblclick="fun(this)"
      />
    </div> -->
    <br />
    <input type="text" id="con" /><button id="save">保存</button
    ><button id="clear">清空本地存储</button>
    <br />
    任务列表：
    <ul></ul>
  </body>
  <script>
    // function fun(obj) {
    //   document.body.style.background = `url(${obj.src})  no-repeat`
    //   localStorage.setItem('src', obj.src)
    // }
    window.onload = function () {
      //   document.body.style.background = `url(${localStorage.getItem(
      //     'src'
      //   )})  no-repeat`
      save.onclick = saves
      clear.onclick = clearFun
      showList()
    }
    function clearFun() {
      localStorage.clear()
      showList()
    }
    //添加任务
    function saves() {
      var val = document.getElementById('con').value
      saveLocal(val)
    }
    function saveLocal(val) {
      var lists = localStorage.getItem('lists')
      if (lists == null) {
        localStorage.setItem('lists', JSON.stringify([val]))
      } else {
        lists = JSON.parse(lists)
        lists.unshift(val)
        localStorage.setItem('lists', JSON.stringify(lists))
      }
      showList()
    }
    function showList() {
      var lists = JSON.parse(localStorage.getItem('lists'))
      console.log(lists)
      if (lists && lists.length > 0) {
        var str = ''
        for (i in lists) {
          str +=
            '<li>    <input type="checkbox" name="" id="">' +
            (+i + 1) +
            '：' +
            lists[i] +
            ' <button onclick=del(' +
            i +
            ')>×</button><button>取消</button></li>'
        }
        document.getElementsByTagName('ul')[0].innerHTML = str
      } else {
        document.getElementsByTagName('ul')[0].innerHTML = '暂无任务'
      }
    }
    function del(index) {
      var lists = JSON.parse(localStorage.getItem('lists'))
      lists.splice(index, 1)
      localStorage.setItem('lists', JSON.stringify(lists))
      showList()
    }
  </script>
</html>
